<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>鱼吧</title>
    <link rel="icon" href="../index/image/logo_title.png">
   <link rel="stylesheet" href="./css/yuba.css">
</head>
<body>
    <div id="all_bg">
        <canvas id="canvas"></canvas>
    </div>
    <div class="yb_main">
        <div class="yb_left">
            <ul>
                <li class="go">
                    
                    <span><img src="./yuba_img/huo5.png" alt=""></span>
                    <span>发布内容</span>
                
                </li>
                <li class="go">
                    
                        <span><img src="./yuba_img/huo.png" alt=""></span>
                        <span>热门推荐</span>
                    
                </li>
                <li  class="go">
                        <span><img src="./yuba_img/huo2.png" alt=""></span>
                        <span>社区热榜</span>
                </li>
               
              
                <li class="go">
                    
                        <span><img src="./yuba_img/huo4.png" alt=""></span>
                        <span>全部鱼吧</span>
                   
                </li>
                <li>
                    <a href="./ybBangdan.html">
                        <span><img src="./yuba_img/huo3.png" alt=""></span>
                        <span>排行榜</span>
                    </a>
                </li>
                <li >
                   
                        <span><img src="./yuba_img/huo5.png" alt=""></span>
                        <span>推荐鱼吧</span>
                   
                </li>
                <li>
                        <span><img src="./yuba_img/huo6.png" alt=""></span>
                        <span>主播蛋白</span>
                </li>
           
            
                <li >
                    
                        <span><img src="./yuba_img/huo7.png" alt=""></span>
                        <span>全部话题</span>
                    
                </li>
                <li >
                    
                        <span><img src="./yuba_img/huo7.png" alt=""></span>
                        <span>全部专栏</span>
                   
                </li>
               
            </ul>
        </div>
        <div class="yb_center_cover">
        <div class="yb_center">
            <div class="yb_c_header d_box">
                <h2>请输入你想说的内容</h2>
                <!-- 输入部分 -->
                <div>
                    <textarea name="" id="shuru" ></textarea>
                    <div class="shuru_b">

                        <img src="./yuba_img/biaoqing.png" alt="">
                        <span>表情</span>
                        <img src="./yuba_img/tupian.png" alt="">
                       
                        <span>图片</span>
                        <img src="./yuba_img/shipin.png" alt="">
                        <span>视频</span>
                        <img src="./yuba_img/yuyin.png" alt="">
                        <span>语音</span>
                        <input type="button" id="yb_add" value="发布"/>
                    </div>
                </div>
            </div>
            <div class="yb_card d_box">
                <ul id="yb_cardWrap">
                    <!-- <li>
                        <a class="card_touxiang"><img src="./yuba_img/tx1.png" alt=""></a>
                        <div class="card_content">
                            <h3>心愿小仙女</h3>
                            <p>发布于：2021.8.18 12:30:00 </p>
                            <span>周年盛典8月19日开启，2倍积分回馈，更有超值折扣券及五档周年回馈可领！
                                周年盛典8月19日开启，2倍积分回馈，更有超值折扣券及五档周年回馈可领！2倍积分：8月19日7:00至8月28日24:00，参与充消活动可享2倍积分回馈
                                超值折扣券：8月19日7:00至8月28日24:00，全区全服内每充消200元即可领取1张7.9折优惠券，代付消费亦可领取！优惠券领取不限角色，不限数量，但不可叠加使用，代付时不可使用，且不可用于限时、限量、实物、非绑定物品等，领取后72小时内有效哦！</span>
                        </div>
                        <div class="card_buttom">
                            <div class="liker">
                                
                                <img src="./yuba_img/aixin2.png" alt="">
                                点赞
                            </div >
                            <div class="sc"><img src="./yuba_img/shoucang.png" alt="">
                                收藏</div>
                            <div class="zf"><img src="./yuba_img/zhuanfa.png" alt="">
                                转发</div>
                            <div class="pl"><img src="./yuba_img/pinglun.png" alt="">
                                评论</div>
                        </div>

                    </li> -->
                </ul>
               
            </div>
            <div class="sheQu d_box">
                <ul id="sheQu">
                    <!-- <li>
                        <img src="./yuba_img/fei.png" alt="">
                        <a class="card_touxiang"><img src="./yuba_img/tx1.png" alt=""></a>
                        <div class="card_content">
                            <h3>心愿小仙女</h3>
                            <p>发布于：2021.8.18 12:30:00 </p>
                            <span>周年盛典8月19日开启，2倍积分回馈，更有超值折扣券及五档周年回馈可领！
                                周年盛典8月19日开启，2倍积分回馈，更有超值折扣券及五档周年回馈可领！2倍积分：8月19日7:00至8月28日24:00，参与充消活动可享2倍积分回馈
                                超值折扣券：8月19日7:00至8月28日24:00，全区全服内每充消200元即可领取1张7.9折优惠券，代付消费亦可领取！优惠券领取不限角色，不限数量，但不可叠加使用，代付时不可使用，且不可用于限时、限量、实物、非绑定物品等，领取后72小时内有效哦！</span>
                        </div>
                        <div class="card_buttom">
                            <div class="liker">
                                
                                <img src="./yuba_img/aixin2.png" alt="">
                                点赞
                            </div >
                            <div class="sc"><img src="./yuba_img/shoucang.png" alt="">
                                收藏</div>
                            <div class="zf"><img src="./yuba_img/zhuanfa.png" alt="">
                                转发</div>
                            <div class="pl"><img src="./yuba_img/pinglun.png" alt="">
                                评论</div>
                        </div>

                    </li> -->
                </ul>
            </div>
            <div class="quanBu d_box">
                
                <div class="reb_title">
                    <img src="./yuba_img/hot.png" alt=""><a href="">全部鱼吧</a>
                </div>
                <ul id="quanBu">
                   
                </ul>
                
                
            </div>
            <div class="tuiJian"></div>
            <div class="zhuBo"></div>
            <div class="huaTi"></div>
            <div class="zhuanLan"></div>
        </div>
        </div>
        <div class="yb_right_cover">
        <div class="yb_right">
            <div class="userCard">
                <!-- <img src="./yuba_img/login_tx2.png" alt=""> -->

                <div class="touxiang_box">
                    <input type="file" name="pclogo" id="xdaTanFileImg" onchange="xmTanUploadImg(this)" accept="image/*">
                    <img src="./yuba_img/tx1.png" class="img-circle img-thumbnail img-responsive" id="avarimgs">
                </div>

                <p>点击更换头像，快来一起互动哦！</p>
                <span class="yb_denglu">立即登录</span>
                <span class="yb_zhuce">快速注册</span>
            </div>
            <div class="zhuboCard">
                <h2 class="Cardtitle">热门主播</h2>
                <ul id="zhuboCard">
                    <li>
                        <img src="./yuba_img/zhubo1.jpg" alt="">
                        <p>抱着琵琶的兔爷</p>
                    </li>
                    
                </ul>
            </div>
            <div class="huatiCard">
                <h2 class="Cardtitle">热门专题</h2>
                <ul id="huatiCard">
                    <li><a href="">七夕百年好盒</a><a href="">102.5万</a></li>
                </ul>
            </div>
            <div class="qunzhongCard">
                <h2 class="Cardtitle">热门群众</h2>
                <ul id="qunzhongCard">
                    <li>
                        <img src="./yuba_img/qz1.jpg" alt="">
                        <div>
                            <p>斗鱼直播</p>
                            <a href="">斗鱼官方鱼吧</a>
                            <a href="">成员1213867</a>
                        </div>
                    </li>
                    <li>
                        <img src="./yuba_img/ot6.jpg" alt="">
                        <div>
                            <p>阴阳师</p>
                            <a href="">斗鱼官方鱼吧</a>
                            <a href="">成员99964</a>
                        </div>
                    </li>
                    <li>
                        <img src="./yuba_img/ot20.jpg" alt="">
                        <div>
                            <p>天涯明月手游</p>
                            <a href="">斗鱼官方鱼吧</a>
                            <a href="">成员225437</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        </div>
    </div>
    <div id="yb_login">
        <div>
            <h2>安全登录</h2>
            <ul>
                <li>请打开</li>
                <li>斗鱼APP</li>
                <li>|</li>
                <li>微信</li>
                <li>|</li>
                <li>QQ</li>
                <li>|</li>
                <li>微博</li>
            </ul>
           <p>扫描二维码登录</p>
           <img  src="./yuba_img/erweima.png" alt="">
           <div id="cha">X</div>
        </div>
    </div>
    <div id="yb_register">
        <div>
            <h2>快速注册</h2>
            <input class="zh" type="text" placeholder="请输入账号">
            <span class="zh_error"></span>
            <!-- 密码 -->
            <input class="mima" type="password" placeholder="请输入密码">
            <span class="mima_error"></span>
            <!-- 邮箱 -->
            <input class="email" type="email" placeholder="再次输入邮箱">
            <span class="email_error"></span>
            <!-- 手机号 -->
            <input class="shouji" type="tel" placeholder="请输入手机号">
            <span class="shouji_error"></span>
            <div id="register_close">X</div>
            <button id="lj_register">立即注册</button>

            <!-- <div class="gouxuan">
                <input type="checkbox"/><p>已阅读并同意 《隐私权政策》《用户注册协议》 和 《用户阳光规范》</p>
               
            </div>  -->
            
            <a href="">去登录</a>
            <a href="">For English</a>
        </div>
    </div>
   <script src="./lib/jquery-2.0.0.min.js"></script>

    <script src="./js/yb.js"></script>
    
    <script>
$(window).ready(function(){
    
    $(".yb_denglu").click(function(){
        $("#yb_login").show();
    })
    $("#cha").click(function(){
        $("#yb_login").hide();
    })
    $(".yb_zhuce").click(function(){
        $("#yb_register").show();
    })
    $("#register_close").click(function(){
        $("#yb_register").hide();
    })
    // 点击添加
    $("#yb_add").click(function(){
    // var new_li=$("<li></li>").html($("#shuru").val());
    var new_li2=$("<li></li>").html('<a class="card_touxiang"><img src="./yuba_img/tx4.png" alt=""></a><div class="card_content"><h3>@1723611230</h3><p>发布于：2021.8.18 12:30:00 </p><span>'+$("#shuru").val()+'</span></div><div class="card_buttom"><div class="liker"><img src="./yuba_img/aixin2.png" alt="">点赞</div ><div class="sc"><img src="./yuba_img/shoucang.png" alt="">收藏</div><div class="zf"><img src="./yuba_img/zhuanfa.png" alt="">转发</div><div class="pl"><img src="./yuba_img/pinglun.png" alt="">评论</div></div>');
    $("#yb_cardWrap").prepend(new_li2);
    })
    // 变色
    
})
     
</script>
<script>
    //  window.onload=function(){
        
        var obj=$.ajax({
            type:"get",
            url:"./js/yb.json",
            async:false,
            success:function(response,status,xhr){
                // console.log(response);
            },
            error:function(){
                console.log("错啦");
            }
        })
        function Product(obj){
            this.src=obj.src;
            this.id=obj.id;
            this.content=obj.content;
        }
        function Product2(obj){
            this.src=obj.src;
            this.id=obj.id;
            this.content=obj.content;
        }
        function Product3(obj){
            this.src=obj.src;
            this.content=obj.content;
        }
        function Product4(obj){
            this.text1=obj.text1;
            this.text2=obj.text2;
        }
        function Product5(obj){
                // this.src=obj.src;
                this.paiming=obj.paiming;
                this.bisai=obj.bisai;
                this.shijian=obj.shijian;
                this.jieshuo=obj.jieshuo;
                this.img=obj.img;
                this.biaoqian1=obj.biaoqian1;
                this.biaoqian2=obj.biaoqian2;
                this.biaoqian3=obj.biaoqian3;

           }
       
        Product.prototype={
            init:function(){
                //   //前置追加
                var new_li=$("<li></li>");
                new_li.html('<a class="card_touxiang"><img src="'+this.src+'" alt=""></a><div class="card_content"><h3>'+this.id+'</h3><p>发布于：2021.8.18 12:30:00 </p><span>'+this.content+'</span></div><div class="card_buttom"><div class="liker" ><img src="./yuba_img/aixin2.png" alt="">点赞</div ><div class="sc"><img src="./yuba_img/shoucang.png" alt="">收藏</div><div class="zf"><img src="./yuba_img/zhuanfa.png" alt="">转发</div><div class="pl"><img src="./yuba_img/pinglun.png" alt="">评论</div></div>').appendTo($("#yb_cardWrap"));
            }
        }
        Product2.prototype={
            init:function(){
                //   //前置追加
                var new_li=$("<li></li>");
                new_li.html('<img src="./yuba_img/fei.png" alt=""><a class="card_touxiang"><img src="'+this.src+'" alt=""></a><div class="card_content"><h3>'+this.id+'</h3><p>发布于：2021.8.18 12:30:00 </p><span>'+this.content+'</span></div><div class="card_buttom"><div class="liker" onclick="liker_click(this)"><img src="./yuba_img/aixin2.png" alt="">点赞</div ><div class="sc"><img src="./yuba_img/shoucang.png" alt="">收藏</div><div class="zf"><img src="./yuba_img/zhuanfa.png" alt="">转发</div><div class="pl"><img src="./yuba_img/pinglun.png" alt="">评论</div></div>').appendTo($("#sheQu"));
            }
        }
        Product3.prototype={
            init:function(){
                //   //前置追加
                // var new_li=$("<li></li>");
                // new_li.html('<img src="./yuba_img/fei.png" alt=""><a class="card_touxiang"><img src="'+this.src+'" alt=""></a><div class="card_content"><h3>'+this.id+'</h3><p>发布于：2021.8.18 12:30:00 </p><span>'+this.content+'</span></div><div class="card_buttom"><div class="liker"><img src="./yuba_img/aixin2.png" alt="">点赞</div ><div class="sc"><img src="./yuba_img/shoucang.png" alt="">收藏</div><div class="zf"><img src="./yuba_img/zhuanfa.png" alt="">转发</div><div class="pl"><img src="./yuba_img/pinglun.png" alt="">评论</div></div>').appendTo($("#sheQu"));
                $("<li></li>").html('<img src="'+this.src+'" alt=""><p>'+this.content+'</p>').appendTo($("#zhuboCard"));
            }
        }
        Product4.prototype={
            init:function(){
                $("<li></li>").html('<a href="">'+this.text1+'</a><a href="">'+this.text2+'万</a>').appendTo($("#huatiCard"));
            }
        }
        Product5.prototype={
               init:function(){
                   //   //前置追加
                   var new_li=$("<li></li>");
                   $("<li></li>").html('<div class="rb_item1"><span>'+this.paiming+'</span><span>#'+this.bisai+'#</span><a href="">'+this.shijian+'</a></div><div class="rb_item2"><div>'+this.jieshuo+'</div><img src="'+this.img+'" alt=""></div><div class="rb_item3"><a href="">'+this.biaoqian1+'</a><a href="">'+this.biaoqian2+'万阅读</a><a href="">'+this.biaoqian3+'讨论</a></div>').appendTo($("#quanBu"));
               }

            }
        
        $.each(obj.responseJSON.data,function(i,e){
            var pro =new Product(e);
            pro.init();
        })
        $.each(obj.responseJSON.data,function(i,e){
            var pro2 =new Product2(e);
            pro2.init();
        })
        $.each(obj.responseJSON.zhuboCard,function(i,e){
            var pro2 =new Product3(e);
            pro2.init();
        })
        $.each(obj.responseJSON.huatiCard,function(i,e){
            var pro2 =new Product4(e);
            pro2.init();
        })
        $.each(obj.responseJSON.quanBu,function(i,e){
            var pro2 =new Product5(e);
            pro2.init();
        })
    // }
</script>
<!-- zhuce -->
<script src="./js/register.js"></script>
<script src="./js/canvas1.js"></script>
</body>

</html>